<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark">
          <div class="layout-logo">仿真系统</div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              个人中心
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
              登出
            </MenuItem>

          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu active-name="settings" theme="light" width="auto" :open-names="['settings']" @on-select="routerHandler">

            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-keypad"></Icon>
                工程
              </template>
              <MenuItem name="createProject">新建工程</MenuItem>
              <MenuItem name="history">历史工程仿真记录</MenuItem>
            </Submenu>
            <MenuItem name="settings">新建仿真测试</MenuItem>

          </Menu>
        </Sider>
        <Layout :style="{padding: '0 24px 24px'}">
          <Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem>控制台</BreadcrumbItem>
            <BreadcrumbItem>{{currentBreadCrumb}}</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{padding: '24px', background: '#fff'}" class="full-height">
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
  export default {
    name: 'basic-layout',
    data() {
      return {
        currentBreadCrumb: '仿真测试'
      }
    },
    methods: {
      routerHandler(name) {
        switch (name) {
          case 'settings':
            this.$router.push('/dashboard/settings')
            this.currentBreadCrumb = '仿真测试'
            break;
          case 'createProject':
            this.$router.push('/dashboard/createProject')
            this.currentBreadCrumb = '新建工程'

        }
      }
    }
  }
</script>

<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-logo{
    width: 100px;
    height: 30px;
    font-size: 22px;
    color: #fff;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 5px;
    left: 10px;
  }
  .layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }
  .full-height {
    min-height: calc(100vh - 150px)
  }
</style>
